<template>
  <div class="container">
    <p class="font18 color333 mb30">用户组选择</p>
    <el-form :model="ruleForm"  ref="ruleForm" label-position="right" class="demo-ruleForm mb60">
      <!--名称-->
      <el-form-item prop="name" class="mb30">
        <span class="color333 font16 ml99">名称：</span>
        <span class="color333 font16">{{ruleForm.name}}</span>
      </el-form-item>

      <!--用户组-->
      <div v-for="(item,index) in ruleForm.tripUserGroupRequestList" :key="index" class="mb30">
        <span class="ml63">
          <span style="color:red">*</span>
          <span class="font16 color333 ">用户组{{index+1}}：</span>
        </span>
        
        <div class="userSetsForm vt mr10">
          <!--用户组类型下拉框·-->
          <el-form-item class="mb30 labelColor666 noMargin">
            <span class="color333 font16">用户组类型：</span>
            <span class="color333 font16" v-if="item.userSetType == 1">动态分组</span>
            <span class="color333 font16" v-if="item.userSetType == 2">静态分组</span>
          </el-form-item>

          <!--用户组下拉框·-->
          <el-form-item class="labelColor666 noMargin">
            <span class="color333 font16 ml30">用户组：</span>
            <span class="color333 font16">{{getUserGroupName(item.userGroupId)}}</span>
          </el-form-item>
        </div>
      </div>

      <!--用户组之间的关系-->
      <el-form-item  prop="relation" required="true">
        <span class="color333 font16">用户组之间的关系：</span>
        <span class="color333 font16" v-if="ruleForm.relation == 1">交集</span>
        <span class="color333 font16" v-if="ruleForm.relation == 2">并集</span>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button @click="cancel" class="cancelButton mr60">取 消</el-button>
      <el-button type="primary" @click="cancel" class="searchButton">确 认</el-button>
    </el-row>
  </div>
</template>

<script>
  // 自动化营销-----用户组选择组件
  export default {
    name: 'userGroupSelectionInfo',
    components: {},
    props: {
      nodeInfo: {
        type: Object,
      },
      journeyId: {
        type: String,
        default: '',
      }
    },

    data() {
      return {
        ruleForm: {
          name: null,                                    //用户组名称
          relation: null,                                //用户组之间的关系
          tripUserGroupRequestList: [
            {
              userSetType: null,                                  //用户组类型
              userGroupId: null,                                 //用户组
              userGroupName: null,                                 //用户组
            }
          ],             //用户组中数据
        },
        userGroups: [],

      }
    },

    methods: {
      getUserGroupName(userGroupId){
        let item = this.userGroups.find(function (item, index) {
          return item.id == userGroupId
        })
        return typeof(item)=="undefined" ? "" : item.userGroupName;
      },


      // 详情
      detail() {
        let this_ = this
        this.utils.request.getBranchNodeDetail({branchNodeId: this.nodeInfo.nodeId}, function (res) {
          if (res.code == '0000') {
            this_.ruleForm = JSON.parse(res.data.nodeVariable)

            let callback = function(res1) {
              this_.userGroups.push(res1.data);
            };

            for (let i = 0; i <  this_.ruleForm.tripUserGroupRequestList.length; i++) {
              this_.utils.request.getUserGroupDetail({id: this_.ruleForm.tripUserGroupRequestList[i].userGroupId}, callback)
            }
          }
        })
      },

      // 关闭弹窗
      close() {
        this.$emit('handleClose', false)
      },

      // 取消按钮
      cancel() {
        this.close()
      },

    },

    mounted() {
      this.detail()
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .w356 {
    width: 356px !important;

    .el-input__inner {
      width: 356px !important;
    }
  }

  /deep/ .w240 {
    width: 240px !important;

    .el-input__inner {
      width: 240px !important;
    }
  }

  .mb10 {
    margin-bottom: 10px !important;
  }

  .userSetsForm {
    display: inline-block;
    // width: 542px;
    padding: 30px;
    border: 1px solid #999;
    border-radius: 4px;
  }

  .vm {
    vertical-align: middle;
  }

  .mb60 {
    margin-bottom: 60px !important;
  }

  .desc {
    color: #C4C4C4;
    font-size: 12px;
  }
  .mr10{
    margin-right: 10px !important;
  }
  .h32{
    height: 32px !important;
  }
  .vt{
    vertical-align: top;
  }
  .mr8{
    margin-right: 8px !important;
  }
  .vb{
    vertical-align: bottom;
  }
  /deep/ .operateButton{
    border: 1px solid #0079DC !important;
    padding: 0 13px !important;
    height: 20px !important;
    font-size: 18px;
    line-height: 20px !important;
    border-radius: 12px !important;
  }
  /deep/ .labelColor666{
    .el-form-item__label{
      color: #666666;
    }
  }
  /deep/ .w372{
    width: 372px !important;
    /deep/ .el-input__innner{
      width: 372px !important;
    }
  }
  /deep/ .w405{
    width: 405px !important;
    .el-input__inner{
      width: 405px !important;
    }
  }
  /deep/ .w542{
    width: 542px !important;
    .el-input__inner{
      width: 542px !important;
    }
  }
  .noMargin /deep/ .el-form-item__content{
    margin-right: 0 !important;
  } 
</style>
